<script setup lang="ts">
import { nextTick, ref, toRaw, onMounted } from 'vue'
import { ElInput, ElMessage } from 'element-plus'
import {
  setDepartmentAPI,
  setProductAPI,
  getDepartmentAPI,
  getProductAPI,
} from '@/http/swiperCompanyInfo'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const departmentInputValue = ref('')
const productInputValue = ref('')

const tagsDepartmentArr = ref([])
const tagsProductArr = ref([])

const departmentInput = ref(false)
const productInput = ref(false)

const departmentInputRef = ref<InstanceType<typeof ElInput>>()
const productInputRef = ref<InstanceType<typeof ElInput>>()

const getTags = async () => {
  const res = await getDepartmentAPI()
  const res1 = await getProductAPI()
  tagsDepartmentArr.value = res
  tagsProductArr.value = res1
}

const handleClose = async (tag: string) => {
  tagsDepartmentArr.value.splice(tagsDepartmentArr.value.indexOf(tag), 1)
  tagsProductArr.value.splice(tagsProductArr.value.indexOf(tag), 1)
  const res = await setDepartmentAPI(
    JSON.stringify(toRaw(tagsDepartmentArr.value)),
  )
  const res1 = await setProductAPI(JSON.stringify(toRaw(tagsProductArr.value)))
  ElMessage({
    type: res.status == 0 ? 'success' : 'error',
    message: res.status == 0 ? `${res.message}` : '修改部门设置失败！',
  })
  ElMessage({
    type: res1.status == 0 ? 'success' : 'error',
    message: res1.status == 0 ? `${res.message}` : '修改部门设置失败！',
  })
}

const showDepartmentInput = () => {
  departmentInput.value = true
  nextTick(() => {
    departmentInputRef.value!.input!.focus()
  })
}
const showProductInput = () => {
  productInput.value = true
  nextTick(() => {
    productInputRef.value!.input!.focus()
  })
}

const handleInputConfirm = async () => {
  if (departmentInputValue.value) {
    tagsDepartmentArr.value.push(departmentInputValue.value)
    const res = await setDepartmentAPI(
      JSON.stringify(toRaw(tagsDepartmentArr.value)),
    )
    ElMessage({
      type: res.status == 0 ? 'success' : 'error',
      message: res.status == 0 ? `${res.message}` : '添加部门设置失败！',
    })
  }
  if (productInputValue.value) {
    tagsProductArr.value.push(productInputValue.value)
    const res = await setProductAPI(JSON.stringify(toRaw(tagsProductArr.value)))
    ElMessage({
      type: res.status == 0 ? 'success' : 'error',
      message: res.status == 0 ? `${res.message}` : '添加部门设置失败！',
    })
  }
  departmentInput.value = false
  productInput.value = false
  departmentInputValue.value = ''
  productInputValue.value = ''
}
onMounted(() => {
  getTags()
})
</script>

<template>
  <div class="tag">
    <span>部门设置</span>
    <el-tag
      v-for="tag in tagsDepartmentArr"
      :key="tag"
      closable
      @close="handleClose(tag)"
    >
      {{ tag }}
    </el-tag>
    <el-input
      v-if="departmentInput"
      ref="departmentInputRef"
      v-model="departmentInputValue"
      class="w-20"
      size="default"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button
      v-else
      class="button-new-tag"
      size="default"
      @click="showDepartmentInput"
      :disabled="userStore.identity == '用户' ? true : false"
    >
      + 添加部门组织
    </el-button>
  </div>
  <div class="tag">
    <span>产品设置</span>
    <el-tag
      v-for="tag in tagsProductArr"
      :key="tag"
      closable
      @close="handleClose(tag)"
    >
      {{ tag }}
    </el-tag>
    <el-input
      v-if="productInput"
      ref="productInputRef"
      v-model="productInputValue"
      class="w-20"
      size="default"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button
      v-else
      class="button-new-tag"
      size="default"
      @click="showProductInput"
      :disabled="userStore.identity == '用户' ? true : false"
    >
      + 添加产品组织
    </el-button>
  </div>
</template>

<style scoped lang="scss">
.tag {
  display: flex;
  width: 600px;
  justify-content: space-between;
  margin: 15px;

  input {
    width: 20px;
  }
}
</style>
